<template>
	<view class="pageItem">
		<view class="main">
			<view class="main_con">
				<view class="m_tit">
					{{$t('diamond.diamond_detail')}}
				</view>
				<scroll-view class="list_item" scroll-y :show-scrollbar="false" enhanced @scrolltolower="loadMore">
					<block v-for="(item,index) in list" :key="'r_'+index">
						<view class="row">
							<view class="r_con">
								<view class="r_c_t1">{{show_desc(item.type)}}</view>
								<view class="r_c_t2">{{item.change_time|formatTime}}</view>
							</view>
							<view class="r_num">
								<label class="num" v-if="item.score > 0">+{{item.score}}</label>
								<label class="num n2" v-if="item.score < 0">{{item.score}}</label>
							</view>
						</view>
					</block>
				</scroll-view>
				
				<block v-if="empty_show">
					<view style="width:100%;margin-top: 1vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -90%);" v-if="list.length==0">
						<u-empty mode="list" iconSize="120" :text="$t('nodata')" ></u-empty>
					</view>
				</block>
				
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import { getNowDate } from '@/common/public.js'
	export default {
		data() {
			return {
				date:'',
				page : 1,
				load_type : 'more',
				empty_show : 0,
				loading : 0,
				list : [],
			};
		},
		onReachBottom() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.date = getNowDate();
			this.loadData();
		},
		methods:{
			show_desc(type){
				//let lang = uni.getLocale();
				let ty = parseInt(type);
				let tran = 'acc.type'+ty;
				let str = this.$t(tran) || 'not thing';
				return str;
			},
			pageinit(){
				this.page = 1;
				this.load_type = 'more';
				this.list = [];
				this.loadData();
			},
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let date = this.date.split('-');
				let url = this.site_url + 'api/index/day_income_list?page='+this.page+'&ym='+date.join('');
				   
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 10)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			dateChange(e){
				this.date = e.detail.value;
				this.pageinit();
			},
			loadMore(){
				console.log('更多数据')
			}
		}
	}
</script>

<style lang="scss">
.head {
	width: 100%;
	position: fixed;
	z-index: 98;
	padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
	background: $main_color2;
	.h_con {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		background: $main_color_s2;
		padding: 4vw;
		border-radius: 3vw;
		.msg{
			flex: 1;
			.m_t1{
				width: 100%;
				font-size: 3.5vw;
				color: #fff;
				display: flex;
				align-items: center;
				.img{
					width: 4vw;
					margin-right: 1vw;
				}
			}
			.m_num{
				font-size: 6vw;
				font-weight: bold;
				color: #fff;
				padding-top: 2vw;
			}
		}
		.btn{
			padding: 1.8vw 3vw;
			background: #222;
			color: #fff;
			font-size: 3.5vw;
			border-radius: 1.5vw;
			margin-top: 3vw;
		}
	}
}
.bg_item {
	@include bg_item(90vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 5vw)  4% calc(var(--status-bar-height) + 31vw) 4%;
	.main_con{
		@include card_style();
		.m_tit{
			width: 100%;
			padding: 0 0 2vw;
			border-bottom: 1rpx solid #efefef;
			font-size: 4.3vw;
			font-weight: bold;
			position: relative;
			color: $main_color4;
			.time{
				position: absolute;
				right: 0;
				padding: 1vw 3vw;
				font-size: 3vw;
				color: #222;
				background: #efefef;
				border-radius: 4vw;
				bottom: 2vw;
				font-weight: 400;
			}
		}
		.list_item{
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - 70vw);
			margin-top: 3vw;
			.row:not(:first-child){
				margin-top: 2vw;
			}
			.row{
				width: 100%;
				padding: 2vw 0;
				display: flex;
				align-items: center;
				.r_con{
					flex: 1;
					.r_c_t1{
						width: 100%;
						font-size: 4vw;
						font-weight: bold;
						color: $main_color5;
						@include text_over_style(1);
					}
					.r_c_t2{
						width: 100%;
						color: $main_color4;
						font-size: 3.3vw;
						padding-top: 2vw;
					}
				}
				.r_num{
					font-size: 5vw;
					font-weight: bold;
					.num{
						color: $main_color4;
					}
					.n2{
						color: $price_color;
					}
				}
			}
		}
	}
}
</style>
